<mdd-page page-type="Page">
    <layout item-name="E08_StationMachine">
        <div item-name="station_machine" class="kmi-layout-main-content stationMachine">
            <div class="kmi-layout-page left" ng-class="{'is-min':machine_panel_mode == 'MIN', 'is-max':machine_panel_mode == 'MAX'}">
                <mdd-layout layout-name="E08_PlotInfo" page-name="E08_StationMachine" class="kmi-layout-page left" ng-class="{'is-min':machine_panel_mode == 'MIN', 'is-max':machine_panel_mode == 'MAX'}">
                    <div item-name="panel_btn"  ng-click="changePanelSize('MIN');" style="right:32px;">
                        <img src="image/icons/dropleft.png"></img>
                        <div class="kmi-can-click"></div>
                    </div>
                    <div item-name="panel_btn2"  ng-click="changePanelSize('MAX');">
                        <img src="image/icons/dropright.png"></img>
                        <div class="kmi-can-click"></div>
                    </div>
                </mdd-layout>
                <mdd-list list-name="E08_PlotList" list-bind="lot_result" list-alias="" page-name="E08_StationMachine" style="flex:1;">
                </mdd-list>
            </div>
            <div item-name="station_machine" class="kmi-layout-page right" ng-hide="machine_panel_mode == 'MAX'">
                <div id="sound-content">
                    <audio id="success-sound">
                        <source src="sound/beep1s.mp3" type="audio/mp3">
                    </audio>
                    <audio id="fail-sound">
                        <source src="sound/doubleBeep1s.wav" type="audio/wav">
                    </audio>
                </div>
                <div class="pcs-content" ng-show="selectItem && selectItem.work_mode != '0'" ng-class="{'content-min':isESOPSize=='MAX'}">
                    <div class="fields" style="padding:0 8px;">
                        <div class="kmi-text-fields">
                            <div class="triger-btn" ng-click="changeESOPSize('MAX');" ng-show="selectItem.work_mode != '0'">
                                <i class="material-icons close">remove</i>
                                <i class="material-icons open">add</i>
                                <div class="kmi-can-click"></div>
                            </div>
                            <label class="label title" ng-bind="'E08.work_mode_'+work_mode | translate" style="margin-left: 8px;"></label>
                            <input class="value" id="input_barcode" ng-keypress="barcodeScan($event);" ng-blur="input_blur();"></input>
                            <label class="label" ng-bind="'E08.label' | translate" style="margin-left: 8px;"></label>
                            <input class="value" readonly ng-value="selectItem.label_no" ng-click="selectLabel();"></input>
                            <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                            <div class="triger-btn info" ng-click="isShowProductionInfo = !isShowProductionInfo" style="margin-left: 8px;">
                                <i class="material-icons" ng-if="!isShowProductionInfo">&#xE88F;</i>
                                <i class="material-icons" ng-if="isShowProductionInfo">close</i>
                                <div class="kmi-can-click"></div>
                            </div>
                        </div>
                    </div>
                    <div class="fields info" ng-show="isShowProductionInfo" style="flex:1;">
                        <div class="kmi-text-fields">
                            <label class="label" ng-bind="'E08.wo_no' | translate"></label>
                            <label class="value" ng-bind="selectItem.wo_no"></label>
                            <label class="label" ng-bind="'E08.mo_qty' | translate"></label>
                            <label class="value" ng-bind="selectItem.mo_qty"></label>
                        </div>
                        <div class="kmi-text-fields">
                            <label class="label" ng-bind="'E08.item_no' | translate"></label>
                            <label class="value" ng-bind="selectItem.item_no"></label>
                        </div>
                        <div class="kmi-text-fields">
                            <label class="label" ng-bind="'E08.item_name' | translate"></label>
                            <label class="value" ng-bind="selectItem.item_name"></label>
                        </div>
                        <div class="kmi-text-fields">
                            <label class="label" ng-bind="'E08.item_spec' | translate"></label>
                            <label class="value" ng-bind="selectItem.item_spec"></label>
                        </div>
                    </div>
                    <!-- 20220329 modify by Alan for#109578 : 修正欄位寬度無法調整的問題 -->
                    <!-- pcs-list 會動態載入到這裡-->
                    <div class="sum-fields">
                        <div class="kmi-text-fields">
                            <label class="label" ng-bind="('E08.note' | translate) + selectItem.pcs_detail.length"></label>
                            <label class="label" ng-bind="('E08.total' | translate) + selectItem.total_pcs_qty"></label>
                            <label class="label" ng-bind="('E08.Remaining' | translate) + selectItem.remaining"></label>
                            <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="changePrint_sn();">
                                <img ng-src="{{stationMachine.print_sn == '1'?'image/icons/check1.png':'image/icons/check0.png'}}" ></img>
                                <!-- {{'E08.print_sn' | translate}} -->
                                <label class="label" ng-bind="'E08.print_sn' | translate"></label>
                            </button>
                        </div>
                        <div class="btn-content">
                            <div class="kmi-button kmi-button-cancel" ng-hide="isShowProductionInfo">
                                <label ng-bind="'E08.btn.abnormal' | translate"></label>
                                <div class="kmi-can-click" ng-click="openAbnormalList();"></div>
                            </div>
                            <div class="kmi-button kmi-button-confrim" ng-hide="isShowProductionInfo">
                                <label ng-bind="'common.btn.confirm' | translate"></label>
                                <div class="kmi-can-click" ng-click="pcs_confirm();"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="esop-title" ng-show="selectItem">
                    <div class="esop-triger-page" ng-click="changeESOPSize('MIN');" ng-show="selectItem.work_mode != '0'">
                        <i class="material-icons close" ng-show="isESOPSize != 'MIN'">remove</i>
                        <i class="material-icons open" ng-show="isESOPSize == 'MIN'">add</i>
                        <div class="kmi-can-click"></div>
                    </div>
                    <label style="margin-left: 8px;flex:1;">eSOP</label>
                    <div class="esop-triger-page" ng-click="isListOpen = !isListOpen">
                        <i class="material-icons" ng-if="isListOpen">close</i>
                        <i class="material-icons" ng-if="!isListOpen">menu</i>
                        <div class="kmi-can-click"></div>
                    </div>
                </div>
                <div class="esop-content" ng-show="selectItem" ng-class="{'content-min':(isESOPSize=='MIN' && selectItem.work_mode != '0')}">
                    <div class="esop-content-page">
                        <iframe id="kmi-pdf-panel" name="kmi-pdf-panel" ng-show="currentFile.content_type == '0'"></iframe>
                        <video id="kmi-video-panel" width="320" height="240" controls autoplay loop style="width:100%;height:100%;"
                            ng-show="currentFile.content_type == '1'"  onclick="this.paused?this.play():this.pause();"></video>
                        <div style="overflow:auto;text-align: center;width: 100%;flex:1;" ng-show="currentFile.content_type == '2'">
                            <img id="kmi-img-panel" ng-src="{{currentFile.esop_content}}">
                        </div>
                        <div class="toolbar" ng-show="currentFile.content_type == '0' || currentFile.content_type == '2'">
                            <button class="mdl-button mdl-js-button mdl-button--fab mdl-shadow--custom mdl-button--custom1 sub" ng-click="zoom_in();">
                                <img src="image/icons/add.png"></img>
                            </button>
                            <button class="mdl-button mdl-js-button mdl-button--fab mdl-shadow--custom mdl-button--custom1 sub" ng-click="zoom_out();">
                                <img src="image/icons/remove.png"></img>
                            </button>
                        </div>
                    </div>
                    <div class="esop-list-page" ng-show="isListOpen">
                        <div class="kmi-list kmi-list__no-header none-scrollbar">
                            <div class="kmi-list__row-content">
                            <div class="kmi-list__row" ng-class="{'even-row':$even,'odd-row':$odd}" ng-repeat="esopFile in selectItem.esop_result track by $index"
                                ng-click="clickEsopFile(esopFile);">
                                <div class="kmi-list__column" style="flex:1;white-space: normal;" ng-bind="esopFile.esop_name"></div>
                                <div class="kmi-can-click"></div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </layout>
</mdd-page>